<template>
  <a-form
      ref="formRef"
      name="dynamic_form_nest_item"
      :model="dynamicValidateForm"
      @finish="onFinish"
      style="width: 60%;margin: 20px auto;"
  >
    <a-input v-model:value="table" placeholder="表名" style="margin-bottom: 20px"/>

    <a-space :size="30"
             v-for="(user, index) in dynamicValidateForm.users"
             style="display: flex;justify-content: center;"
             align="baseline"
    >
      <a-form-item
          :name="['users', index, 'field']"
          :rules="{
          required: true,
          message: '请输入字段名',
        }"
      >
        <a-input v-model:value="user.field" placeholder="字段名"/>
      </a-form-item>

      <a-form-item
          :name="['users', index, 'type']"
          :rules="{
          required: true,
          message: '请输入字段类型',
        }"
      >
        <a-select
            ref="select"
            v-model:value="user.type"
            style="width: 180px"
            @change="handleChange"
        >
          <a-select-option style="font-weight: 600;font-size: 16px;font-family: Consolas,serif;" value="int">int
          </a-select-option>
          <a-select-option style="font-weight: 600;font-size: 16px;font-family: Consolas,serif;" value="INTEGER">
            INTEGER
          </a-select-option>
          <a-select-option style="font-weight: 600;font-size: 16px;font-family: Consolas,serif;" value="varchar(50)">
            varchar(50)
          </a-select-option>
          <a-select-option style="font-weight: 600;font-size: 16px;font-family: Consolas,serif;" value="varchar(150)">
            varchar(150)
          </a-select-option>
          <a-select-option style="font-weight: 600;font-size: 16px;font-family: Consolas,serif;" value="varchar(250)">
            varchar(250)
          </a-select-option>
          <a-select-option style="font-weight: 600;font-size: 16px;font-family: Consolas,serif;" value="text">text
          </a-select-option>
          <a-select-option style="font-weight: 600;font-size: 16px;font-family: Consolas,serif;" value="date">date
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
          :name="['users', index, 'desc']"
          :rules="{
          required: true,
          message: '请输入备注',
        }"
      >
        <a-input v-model:value="user.desc" placeholder="备注"/>
      </a-form-item>

      <a-form-item
          :name="['users', index, 'default']"
          :rules="{
          required: true,
          message: '默认',
        }"
      >
        <a-select
            ref="select"
            v-model:value="user.default"
            style="width: 180px"
        >
          <a-select-option style="font-weight: 600;font-size: 16px;font-family: Consolas,serif;" value="null">null
          </a-select-option>
          <a-select-option style="font-weight: 600;font-size: 16px;font-family: Consolas,serif;" value="not null">not
            null
          </a-select-option>
        </a-select>
      </a-form-item>

      <MinusCircleOutlined @click="removeUser(user)"/>
    </a-space>
    <a-form-item>
      <a-button type="dashed" block @click="addUser">
        <PlusOutlined/>
        添加字段
      </a-button>
    </a-form-item>
    <a-form-item style="display: flex;flex-direction: row;">
      <a-button style="width: 50%;" type="primary" danger @click="handleClear">清空</a-button>
      <a-button style="width: 50%;" type="primary" html-type="submit">生成</a-button>
    </a-form-item>

    <a-textarea :rows="12" placeholder="" :maxlength="1000" v-model:value="sql"
                style="font-weight: 600;font-size: 16px;font-family: Consolas,serif;"/>
  </a-form>
</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {MinusCircleOutlined, PlusOutlined} from '@ant-design/icons-vue';
import type {FormInstance} from 'ant-design-vue';
import {message} from "ant-design-vue";

interface User {
  field: string;
  type: string;
  desc: string;
  default: string;
}

const formRef = ref<FormInstance>();
const dynamicValidateForm = reactive<{ users: User[] }>({
  users: [{field: "id", type: "int", desc: "主键", default: "not null"}, {
    field: "name",
    type: "varchar(20)",
    desc: "姓名",
    default: "null"
  }],
});
const removeUser = (item: User) => {
  const index = dynamicValidateForm.users.indexOf(item);
  if (index !== -1) {
    dynamicValidateForm.users.splice(index, 1);
  }
};
const addUser = () => {
  dynamicValidateForm.users.push({
    field: '',
    type: '',
    desc: '',
    default: '',
  });
};

const handleChange = (value: string) => {
  // console.log(`selected ${value}`);
};

const handleClear = () => {
  sql.value = '';
};

const table = ref("tableName");
const sql = ref("");

const onFinish = (values: any) => {
  // console.log('Received values of form:', values.users);
  // console.log('dynamicValidateForm.users:', dynamicValidateForm.users);
  if (sql.value.length === 0) {
    sql.value += `create table ${table.value} \n ( \n`;
    for (let i = 0; i < values.users.length; i++) {
      const item = values.users[i];
      sql.value += ` ${item.field} \t ${item.type} \t ${item.default} \t comment \t '${item.desc}' ,\n`;
    }
    sql.value = sql.value.slice(0, sql.value.length - 2) + '\n' + ');\n';
    sql.value += `create unique index ${table.value}_id_uindex on ${table.value} (${values.users[0].field});\n`;
    sql.value += `alter table ${table.value} add constraint ${table.value}_pk primary key (${values.users[0].field});\n`;
    sql.value += `alter table ${table.value} modify ${values.users[0].field} int auto_increment comment '${values.users[0].desc}';\n`
  } else {
    //@ts-ignore
    message.info("请先清空", [0.5], () => {
    });
  }
};
</script>

<style scoped>
*, :deep(.ant-select-selector), :deep(.ant-select-selection-item), :deep(.ant-select-item-option) {
  font-weight: 600;
  font-size: 16px;
  font-family: Consolas, serif;
}
</style>
